<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <p>回收站中有{{ DeleLit }}个文件将在7天内自动清除</p>
            </el-header>
            <el-main>
                <el-table :data="tableData" height="100%" style="width: 100% height:100%">
                    <el-table-column fixed prop="date" label="删除时间" width="200" />
                    <el-table-column prop="name" label="执行人" width="180">
                        <template #default="scope">
                            <el-tag>{{ scope.row.name }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="FileName" label="文件类型" width="180" />
                    <!-- <el-table-column prop="sity" label="状态" width="180" /> -->
                    <el-table-column prop="Time" label="自动清除剩余天数" width="250">
                        <template v-slot="{ row: { Time } }">
                            <div v-my-directive="Time" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="zip" label="文件格式" width="180" />
                    <el-table-column fixed="right" label="操作" width="180">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="OkDelete(scope.$index, scope.row)">恢复</el-button>
                            <el-button link type="primary" size="small"
                                @click="OkDelete(scope.$index, scope.row)">清除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        :page-sizes="[10, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
                </div>
            </el-footer>
        </el-container>
    </div>
</template>
  
<script lang="ts" setup>
import type { Ref } from 'vue'
import List from './Data/DeleteList'
import { Directive } from 'vue'
import { onMounted, ref } from "vue";
//删除
const handleClick = (it, id) => {
    console.log(it, id)
}
interface FileList {
    date: string,
    name: string,
    FileName: string,
    sity: string,
    address: string,
    zip: string,
    Time: number
}
//是否查询状态
const Query = ref(false)
//查询到的条数暂存数组
const QueryList: Ref<Array<FileList>> = ref([])
// 总数组
const tableData: Ref<Array<FileList>> = ref([])
//页面显示数据数组
const list: Ref<Array<FileList>> = ref([])
//页数
const currentPage4 = ref(1)
//每页条数
const pageSize4 = ref(15)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const DeleLit = ref()
onMounted: {
    tableData.value = List
    list.value = tableData.value
    list.value = list.value.slice(0, pageSize4.value)
    let newList = tableData.value.filter(item => item.Time < 7)
    DeleLit.value = newList.length
}
// 页数改变
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
    let arr = tableData.value
    // list.value = tableData.value.splice(pageSize4.value-1,currentPage4.value*pageSize4.value-1)
    //如果翻页后每页应该展示的条数加上已经展示的条数大于总条数
    if (currentPage4.value * pageSize4.value - 1 >= tableData.value.length) {
        list.value = arr.slice()
        tableData.value = List
    }
    //如果小于
    if (currentPage4.value * pageSize4.value - 1 < tableData.value.length) {
        // console.log(val);
        list.value = arr.splice(val - 1, currentPage4.value * pageSize4.value)
        // console.log(tableData.value);
        tableData.value = List
        console.log(List);

    }
    tableData.value = List
}
const vMyDirective = {
    beforeMount: (el, { value }) => {
        let text = (value > 15) ? ('new') : (15 >= value && value > 7) ? ('Dele') : ('Delete')
        // console.log(el);
        let obj = {
            Dele: { cls: 'product-state-sale' },
            Delete: { cls: 'product-state' },
            new: { cls: 'product-state-new' }
        }
        el.setAttribute('class', obj[text].cls)
        console.log(value, text);
        el.innerHTML = value + '天后自动清理'
    }
}
const OkDelete = (id, it) => {
    // console.log(id);
    tableData.value.splice(id, 1)
    let newList = tableData.value.filter(item => item.Time < 7)
    DeleLit.value = newList.length
}
</script>
<style lang="less" scoped>
.common-layout {
    display: block;
    position: relative;
    height: 673.6px;
    background: white;
    // overflow: auto;
    // text-align: center;

    >.el-container {
        display: block;
        position: relative;
        height: 100%;
        background: white;
        // overflow: hidden;

        >footer,
        >main,
        >header {
            // height: 48px;
            padding: 8px 12px;
            height: 100%;
        }

        >footer,
        >header {
            text-align: right;
            background-color: white;
            // border-bottom: 1px solid rgb(181, 178, 178);
        }

        >header {
            border-bottom: solid 2px #ddd;
            height: 64px;
            display: flex;
            flex-direction: row;
            justify-content: end;
            align-items: center;

            >p {
                color: rgb(223, 11, 11);
                font-size: 16px;
                float: right;
            }

            .el-input {
                width: 150px;
                height: 80%;
                // margin-right: 18px;
            }

            >.el-button {
                height: 80%;
            }
        }

        >footer {
            border-top: solid 1px #ddd;
            height: 48px;

            >.el-pagination {
                float: right;
            }

            >.demo-pagination-block {
                height: 100%;
                line-height: 100%;

                >.el-pagination {
                    display: flex;
                    flex-direction: row;
                    justify-content: end;
                    padding-right: 15px;
                }
            }
        }

        >main {
            height: calc(100% - 48px - 64px);

            // overflow: hidden;
            // overflow-x: hidden;
            // overflow-y: hidden;
            &.no-footer {
                height: calc(100% - 64px);
            }

            >.el-table {
                height: calc(100%-16px);
            }
        }
    }
}

a {
    text-decoration: none;
}

.product-state-sale {
    color: blue;
}

.product-state-new {
    color: rgb(62, 62, 44);
}

.product-state {
    color: red;

}</style>